<script setup lang="ts">
import VueEcharts from 'vue-echarts'
import type { GasTotalEmission } from './type'
import type { VChartInstance } from '@/types'
import { useChartAutoResize } from '@/mixins/MixinChartAutoResize'

const props = defineProps<{
  data: GasTotalEmission
}>()

const designStore = useDesignStore()
const option = computed(() => {
  // echarts 饼图option
  const v = props.data
  return {
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '各类温室气体排放量及占比',
        type: 'pie',
        radius: ['36%', '60%'],
        center: ['50%', '50%'],
        data: [
          { value: v.CO2, name: 'CO2' },
          { value: v.CH4, name: 'CH4' },
          { value: v.N2O, name: 'N2O' },
          { value: v.HFCs, name: 'HFCs' },
          { value: v.PFCs, name: 'PFCs' },
          { value: v.SF6, name: 'SF6' },
          { value: v.NF3, name: 'NH3' },
        ],
      },
    ],
  }
})

const chartRef = ref<VChartInstance>()

useChartAutoResize(chartRef)
</script>

<template>
  <VueEcharts
    ref="chartRef"
    :option="option" :init-options="{
      locale: 'zh',
    }" :theme="designStore.theme"
  />
</template>
